<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}"></comp-common>
			<comp-header v-bind="{data:data}"></comp-header>
			<view class="body after-navber">
				<view class="join-bg" v-if="data.join||data.success">
					<view class="success" v-if="data.success">
						<view class="content">
							<image class="banner" src="../image/submit.png"></image>
							<view class="banner-text">恭喜您</view>
							<image class="success-tip" src="../image/success.png"></image>
							<view>成功提交步数</view>
							<view>奖金将于24点结算后自动发放</view>
							<view class="tip">奖金可至“我的{{data.dapp.option.step.currency_name?dapp.option.step.currency_name:'活力币'}}”查看</view>
							<button @click="success" class="success-btn">我知道了</button>
						</view>
					</view>
					<view class="join-success" v-if="data.join">
						<image class="join-img" src="../image/participation.png"></image>
						<image @click="close" class="join-close" src="../image/pond-details.png"></image>
						<view>报名成功，记得{{open_date}}来参加哦</view>
						<!-- #ifdef MP-WEIXIN -->
						<button class="invite" openType="share">邀请好友</button>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<button class="invite" @click="onShareWebMessage">邀请好友</button>
						<!-- #endif -->
					</view>
				</view>
				<view class="bg">
					<image :src="dapp.option.step.activity_pic?dapp.option.step.activity_pic:data.__wxapp_img.step.dare_bg.url"></image>
				</view>
				<view class="icon">
					<form bindsubmit="_formIdSubmit" data-type="navigate" data-url="../log/log" reportSubmit="true">
						<button formType="submit" id="_formIdSubmit" class="_formIdSubmit">
							<image src="../image/log.png"></image>
						</button>
					</form>
					<form bindsubmit="_formIdSubmit" data-type="navigate" data-url="../rules/rules?rules=activity_rule" reportSubmit="true">
						<button formType="submit" id="_formIdSubmit" class="_formIdSubmit">
							<image src="../image/rule.png"></image>
						</button>
					</form>
				</view>
				<view class="dare" v-if="data.space==false">
					<view class="join" v-for="(item,index) in data.activity_data" :key="index">
						<view class="join-title">
							<view class="title-left">{{item.open_date}}期</view>
							<view class="msg" v-if="item.date!==time">已有{{item.people_num?item.people_num:0}}人报名</view>
							<view class="not" v-if="item.date==time&&item.log.length==0">未参赛</view>
							<view class="already" v-if="item.date==time&&item.log.length>0">已参赛</view>
						</view>
						<view class="activity-name">{{item.name}}</view>
						<view class="activity-step" v-if="item.date==time&&item.log.length==0">目标{{item.step_num}}步</view>
						<view class="join-info" v-if="item.date==time&&item.log.length>0">
							<view class="target">目标
								<text>{{item.step_num}}</text>步，已完成
								<text>{{step}}</text>步</view>
							<view v-if="item.log_status!=2">请于今日24点前，更新并提交步数</view>
							<view v-if="item.log_status==2">奖金将于24点后结算自动发放</view>
							<button @click="submit" class="submit" :data-id="item.id" :data-step="item.step_num" v-if="item.log_status!=2">提交成绩</button>
							<button class="submit-end" v-if="item.log_status==2">已提交成绩</button>
						</view>
						<view class="dare-item" v-if="item.date==time">
							<view class="item">
								<view class="total">{{item.currency_num?item.currency_num:0}}</view>
								<view>奖金池总额</view>
							</view>
							<view class="item">
								<view class="total">{{item.award_num?item.award_num:0}}</view>
								<view>达标人数</view>
							</view>
						</view>
						<view v-if="item.date!==time">
							<view class="money">{{item.currency_num?item.currency_num:0}}</view>
							<view>奖金池总额</view>
							<view class="info">参与满
								<text>{{item.step_num}}</text>步起平分奖池金额</view>
							<form @submit="_formIdSubmit" class="join-btn" data-type="navigate" :data-url="'../join/join?id='+item.id"
							 reportSubmit="true" v-if="item.log.length==0">
								<button formType="submit" id="_formIdSubmit" class="_formIdSubmit">
									<button class="join-btn">参与比赛</button>
								</button>
							</form>
							<!-- #ifdef MP-WEIXIN -->
							<button class="finish-btn" openType="share" v-if="item.log.length>0">已参赛,邀请好友</button>
							<!-- #endif -->
							<!-- #ifdef H5 -->
							<button class="finish-btn" @click="onShareWebMessage" v-if="item.log.length>0">已参赛,邀请好友</button>
							<!-- #endif -->
						</view>
					</view>
					<view class="temp" v-if="data.ad"></view>
					<view class="loading" v-if="data.loading">正在加载中...</view>
					<view class="temp" v-if="data.ad">
						<ad @error="adError" :unitId="unit_id" v-if="data.unit_id"></ad>
					</view>
				</view>
				<view class="space" v-if="space==true">
					<image src="../image/none.png"></image>
					<view>暂无挑战赛哦</view>
					<view class="temp" style="margin-top:120upx;" v-if="data.ad">
						<ad @error="adError" :unitId="unit_id" v-if="data.unit_id"></ad>
					</view>
				</view>
				<view class="ad">
					<ad @error="adError" :unitId="unit_id" v-if="data.unit_id"></ad>
				</view>
				<view class="over-screen" v-if="data.authorize==false">
					<view class="window">为确保您的正常使用，请完善授权操作</view>
					<view @click="openSetting" class="get-setting">确认</view>
				</view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>

	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
					unit_id: "",
					ad: !1,
					space: !1,
					step: 0,
					page: 2,
					over: !1,
					success: !1
				},
			};
		},
		onLoad: function(e) {myVue = this;
			myVue.getApp.page.onLoad(this, e);
			var a = this,
				i = !1,
				s = !1,
				o = void 0;
			null !== e.user_id && (o = e.user_id), a.getApp.request({
				url: a.getApp.api.step.setting,
				success: function(t) {
					0 == t.code && a.setData({
						title: t.data.title,
						share_title: t.data.share_title
					});
				}
			});
			var c = t.formatTime(new Date()),
				n = c[0] + c[1] + c[2] + c[3] + c[5] + c[6] + c[8] + c[9];
			this.setData({
					page: 2,
					time: n
				}), null !== e.open_date && (i = e.open_date), null !== e.join && (s = e.join),
				a.setData({
					join: s,
					open_date: i
				}), a.getApp.core.showLoading({
					title: "数据加载中...",
					mask: !0
				}), a.getApp.core.getSetting({
					success: function(t) {
						1 == t.authSetting["scope.werun"] && 1 == t.authSetting["scope.userInfo"] ? a.activity(o) : getApp().core.authorize({
							scope: "scope.userInfo",
							success: function(t) {
								a.getApp.core.authorize({
									scope: "scope.werun",
									success: function(t) {
										"authorize:ok" == t.errMsg && a.activity(o);
									},
									fail: function(t) {
										a.setData({
											authorize: !1
										}), a.getApp.core.hideLoading();
									}
								});
							}
						});
					},
					fail: function(t) {
						a.setData({
							authorize: !1
						}), t.getApp.core.hideLoading();
					}
				});
		},
		methods: {
			openSetting: function() {
				var t = this,
					e = t.data.user_id;
				t.getApp.core.openSetting({
					success: function(a) {
						1 == a.authSetting["scope.werun"] && 1 == a.authSetting["scope.userInfo"] && (t.setData({
							authorize: !0
						}), t.getApp.core.showLoading({
							title: "数据加载中...",
							mask: !0
						}), t.activity(e));
					},
					fail: function(e) {
						t.setData({
							authorize: !1
						}), t.getApp.core.hideLoading();
					}
				});
			},
			activity: function(t) {
				var e = this,
					a = void 0,
					i = void 0,
					s = void 0;
				e.getApp.core.login({
					success: function(o) {
						a = o.code, e.getApp.core.getWeRunData({
							success: function(o) {
								i = o.iv, s = o.encryptedData, e.getApp.request({
									url: e.getApp.api.step.activity,
									method: "POST",
									data: {
										encrypted_data: s,
										iv: i,
										code: a,
										user_id: t
									},
									success: function(t) {
										var a = t.list.run_data;
										e.getApp.core.hideLoading();
										var i = t.list.ad_data,
											s = t.list.activity_data,
											o = void 0;
										if (o = !1, s.length < 1) o = !0;
										else
											for (var c = 0; c < s.length; c++) s[c].date = s[c].open_date.replace("-", "").replace("-", "");
										var n = !1,
											p = !1;
										null !== i && (n = t.list.ad_data.unit_id, p = !0), e.setData({
											unit_id: n,
											step: a,
											space: o,
											activity_data: s,
											ad_data: i,
											ad: p
										});
									}
								});
							}
						});
					}
				});
			},
			adError: function(t) {
				console.log(t.detail);
			},
			close: function() {
				this.setData({
					join: !1
				});
			},
			submit: function(t) {
				var that = this;
				var e = void 0,
					a = void 0,
					i = void 0;
				console.log(t);
				var s = t.currentTarget.dataset.id,
					o = (t.currentTarget.dataset.step, this),
					c = this.data.step;
				that.getApp.core.showLoading({
					title: "正在提交...",
					mask: !0
				}), that.getApp.core.login({
					success: function(t) {
						e = t.code, that.getApp.core.getWeRunData({
							success: function(t) {
								a = t.iv, i = t.encryptedData, that.getApp.request({
									url: that.getApp.api.step.activity_submit,
									method: "POST",
									data: {
										code: e,
										iv: a,
										encrypted_data: i,
										num: c,
										activity_id: s
									},
									success: function(t) {
										that.getApp.core.hideLoading(), 0 == t.code ? o.setData({
											success: !0
										}) : that.getApp.core.showModal({
											content: t.msg,
											showCancel: !1
										});
									}
								});
							}
						});
					}
				});
			},
			success: function() {
				this.setData({
					success: !1
				}), getApp().core.redirectTo({
					url: "../dare/dare"
				});
			},
			onShareWebMessage: function(t) {
				this.setData({
					join: !1
				}),this.$webShare({
					path: "/step/index/index?user_id=" + myVue.getApp.getUser().id,
					title: this.data.share_title ? this.data.share_title : this.data.title
				}).then(function() {
					
				})
			}
		},

		onReachBottom: function() {
			var t = this,
				e = t.data.over,
				a = t.data.activity_data,
				i = void 0,
				s = void 0,
				o = void 0;
			if (!e) {
				var c = this.data.page;
				this.setData({
					loading: !0
				}), t.getApp.core.login({
					success: function(n) {
						i = n.code, t.getApp.core.getWeRunData({
							success: function(n) {
								s = n.iv, o = n.encryptedData, t.getApp.request({
									url: t.getApp.api.step.activity,
									method: "POST",
									data: {
										encrypted_data: o,
										iv: s,
										code: i,
										user_id: void 0,
										page: c
									},
									success: function(i) {
										t.getApp.core.hideLoading();
										for (var s = 0; s < i.list.activity_data.length; s++) a.push(i.list.activity_data[s]);
										i.list.activity_data.length < 3 && (e = !0);
										for (var o = 0; o < a.length; o++) a[o].date = a[o].open_date.replace("-", "").replace("-", "");
										t.setData({
											page: c + 1,
											over: e,
											loading: !1,
											activity_data: a
										});
									}
								});
							}
						});
					}
				});
			}
		},
		onShareAppMessage: function(t) {
			return myVue.getApp.page.onShareAppMessage(this), this.setData({
				join: !1
			}), {
				path: "/step/index/index?user_id=" + myVue.getApp.getUser().id,
				title: this.data.share_title ? this.data.share_title : this.data.title
			};
		}
	}
</script>

<style scoped>
	.bg {
		height: 560upx;
		width: 100%;
		overflow-y: hidden;
	}

	.bg image {
		width: 100%;
		height: 100%;
	}

	.icon {
		height: 72upx;
		width: 200upx;
		position: absolute;
		top: 360upx;
		right: 12upx;
	}

	.icon image {
		height: 72upx;
		width: 72upx;
		margin-right: 28upx;
	}

	.dare {
		width: 100%;
		position: absolute;
		top: 450upx;
		left: 0;
		right: 0;
	}

	.dare-info {
		width: 93.6%;
		background-color: white;
		margin: 0 24upx;
		color: #999;
		font-size: 10pt;
		padding: 28upx 32upx;
		border-radius: 16upx;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
	}

	.join-info {
		font-size: 9pt;
		color: #999;
		text-align: center;
		margin-top: 12upx;
	}

	.target {
		font-size: 10pt;
		color: #666666;
		margin-bottom: 14upx;
	}

	.target text {
		color: #ff4544;
		font-family: 'DIN';
	}

	.submit {
		height: 78upx;
		width: 498upx;
		border-radius: 40upx;
		background-color: #ff9d1e;
		color: #ffff;
		margin-top: 20upx;
		line-height: 78upx;
		border: 1upx solid #ff9d1e;
	}

	.submit-end {
		height: 78upx;
		width: 498upx;
		border-radius: 40upx;
		background-color: #ffff;
		color: #ff9d1e;
		margin-top: 20upx;
		line-height: 78upx;
		border: 1upx solid #ff9d1e;
	}

	.join-title {
		height: 55upx;
	}

	.title-left {
		text-align: left;
		float: left;
		width: auto;
		color: #353535;
		font-size: 10pt;
		overflow: hidden;
	}

	.dare-title {
		height: 48upx;
	}

	.not {
		float: right;
		height: 48upx;
		width: 94upx;
		line-height: 48upx;
		background-color: #eee;
		text-align: center;
	}

	.already {
		float: right;
		height: 48upx;
		width: 94upx;
		color: #ff9d1e;
		line-height: 48upx;
		background-color: #fff2e2;
		text-align: center;
	}

	.dare-item {
		width: 100%;
	}

	.item {
		display: inline-block;
		width: 36%;
		text-align: center;
		padding-top: 20upx;
	}

	.total {
		color: #ff9d1e;
		font-family: "DIN";
		font-size: 19pt;
		margin-bottom: 16upx;
	}

	.join {
		width: 93.6%;
		background-color: white;
		margin: 0 24upx 20upx;
		color: #999;
		font-size: 10pt;
		padding: 30upx 32upx 40upx;
		border-radius: 16upx;
		text-align: center;
		margin-top: 20upx;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
	}

	.msg {
		float: right;
	}

	.money {
		color: #ff9d1e;
		font-family: "DIN";
		font-size: 19pt;
		margin: 10upx 0 10upx;
	}

	.info {
		margin: 36upx 0 26upx;
	}

	.info text {
		color: #ff9d1e;
	}

	.join-btn {
		height: 80upx;
		line-height: 80upx;
		width: 500upx;
		border-radius: 40upx;
		background-color: #ff9d1e;
		color: #ffff;
	}

	.finish-btn {
		height: 78upx;
		line-height: 78upx;
		width: 498upx;
		border-radius: 40upx;
		border: 1upx solid #ff9d1e;
		background-color: #ffff;
		color: #ff9d1e;
		font-size: 13pt;
	}

	button::after {
		border: none;
	}

	.success {
		position: fixed;
		top: 300upx;
		z-index: 3;
		background-color: #e8703e;
		width: 630upx;
		height: 640upx;
		margin: 0 60upx;
		border-radius: 16upx;
		text-align: center;
	}

	.content {
		background-color: white;
		width: 598upx;
		height: 608upx;
		margin: 16upx;
		font-size: 13pt;
		color: #9f5100;
	}

	.success-tip {
		height: 200upx;
		width: 200upx;
		margin-bottom: 28upx;
	}

	.banner {
		height: 132upx;
		width: 548upx;
		margin-top: -76upx;
	}

	.banner-text {
		position: fixed;
		top: 272upx;
		width: 598upx;
		text-align: center;
		color: #9f5100;
		font-size: 15pt;
	}

	.tip {
		font-size: 11pt;
		color: #666;
		margin: 30upx 0 18upx;
	}

	.success-btn {
		font-size: 13pt;
		color: #ffff;
		height: 80upx;
		width: 500upx;
		border-radius: 40upx;
		background-color: #ff9d1e;
	}

	.space {
		width: 93.6%;
		height: 550upx;
		background-color: white;
		margin: 0 24upx;
		color: #999;
		font-size: 13pt;
		padding: 80upx 0 100upx;
		border-radius: 16upx;
		text-align: center;
		position: absolute;
		top: 450upx;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
	}

	.no-join image {
		height: 200upx;
		width: 200upx;
		margin-bottom: 35upx;
	}

	.no-join {
		width: 93.6%;
		height: 350upx;
		background-color: white;
		margin: 0 24upx;
		color: #999;
		font-size: 13pt;
		border-radius: 16upx;
		padding: 30upx 0 0;
		text-align: center;
		margin-top: 20upx;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
	}

	.space image {
		height: 300upx;
		width: 300upx;
		margin-bottom: 15upx;
	}

	form {
		display: inline-block;
	}

	.ad {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.temp {
		visibility: hidden;
	}

	.join-bg {
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 9999;
		top: 0;
		left: 0;
	}

	.join-success {
		position: fixed;
		top: 300upx;
		left: 0;
		right: 0;
		margin: 0 auto;
		height: 640upx;
		width: 630upx;
		border-radius: 16upx;
		background-color: white;
		text-align: center;
		z-index: 9;
		padding: 92upx 0 80upx;
	}

	.join-success .join-close {
		width: 28upx;
		height: 28upx;
		position: absolute;
		top: 32upx;
		right: 32upx;
	}

	.join-img {
		height: 260upx;
		width: 260upx;
		margin-bottom: 40upx;
	}

	.join-success view {
		font-size: 12 pt;
		color: #666;
	}

	.invite {
		margin-top: 56upx;
		height: 80upx;
		width: 500upx;
		line-height: 80upx;
		font-size: 13pt;
		color: #ff9d1e;
		border-radius: 40upx;
		background-color: white;
		border: 1upx solid #ff9d1e;
	}

	.invite::after {
		border: 0px;
	}

	.loading {
		font-size: 11pt;
		color: #353535;
		text-align: center;
		height: 80upx;
		line-height: 80upx;
		background-color: #f2f2f2;
	}

	.activity-name {
		font-size: 11pt;
		color: #353535;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
		margin-top: 20upx;
		margin-bottom: 5upx;
		padding: 0 11%;
	}

	.activity-step {
		font-size: 10pt;
		color: #666666;
	}

	.openSetting {
		height: 120upx;
		width: 500upx;
		line-height: 120upx;
		background-color: #4fd866;
		border-radius: 30upx;
		color: #ffff;
		font-size: 20pt;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -250upx;
	}

	.over-screen {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, .3);
		z-index: 100;
	}

	.window {
		height: 160upx;
		line-height: 160upx;
		width: 84%;
		position: fixed;
		top: 400upx;
		left: 0;
		right: 0;
		margin: 0 auto;
		background-color: white;
		text-align: center;
		font-size: 12pt;
		color: #353535;
		border-top-left-radius: 16upx;
		border-top-right-radius: 16upx;
	}

	.get-setting {
		height: 88upx;
		line-height: 88upx;
		width: 84%;
		position: fixed;
		top: 560upx;
		left: 0;
		right: 0;
		margin: 0 auto;
		border-top: 1upx solid #e2e2e2;
		background-color: white;
		text-align: center;
		border-bottom-left-radius: 16upx;
		border-bottom-right-radius: 16upx;
		font-size: 12pt;
		color: #353535;
	}
</style>
